<template>
	<view class="body">
		<!-- 开头部分 -->
		<uni-nav-bar dark background-color="#2477f4" title="优惠券" :border="false" left-icon="left"
			@clickLeft="back"></uni-nav-bar>
		<view class="bc"></view>
		<view class="bc2">
			<view class="list">
				<view class="listItem">
					<view class="up">
						<view class="up-left">
							<view class="scope">
								<text>仅限于XX加油站使用</text>
							</view>
							<view class="condition">
								<text>满200元可用</text>
							</view>
						</view>
						<view class="up-right">
							<text>￥</text>
							<text>20</text>
						</view>
					</view>
					<view class="down">
						<view class="down-left">
							<text>有效期至:2020.04.11-2023.05.11</text>
						</view>
						<view class="down-right">
							<view class="use">去使用
							<uni-icons type="right" color=white class="icon-right"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				
				<view class="listItem">
					<view class="up">
						<view class="up-left">
							<view class="scope">
								<text>仅限于XX加油站使用</text>
							</view>
							<view class="condition">
								<text>满200元可用</text>
							</view>
						</view>
						<view class="up-right">
							<text>￥</text>
							<text>20</text>
						</view>
					</view>
					<view class="down">
						<view class="down-left">
							<text>有效期至:2020.04.11-2023.05.11</text>
						</view>
						<view class="down-right">
							<view class="use">去使用
							<uni-icons type="right" color=white class="icon-right"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				
				<view class="listItem">
					<view class="up">
						<view class="up-left">
							<view class="scope">
								<text>仅限于XX加油站使用</text>
							</view>
							<view class="condition">
								<text>满200元可用</text>
							</view>
						</view>
						<view class="up-right">
							<text>￥</text>
							<text>20</text>
						</view>
					</view>
					<view class="down">
						<view class="down-left">
							<text>有效期至:2020.04.11-2023.05.11</text>
						</view>
						<view class="down-right">
							<view class="use">去使用
							<uni-icons type="right" color=white class="icon-right"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			back(){
				uni.navigateBack();
			},
		}
	}
</script>

<style>
.body {
		width: 750rpx;
	}
	
/* 开头部分样式开始 */
	.bc {
		width: 750rpx;
		height: 300rpx;
		position: relative;
		border-top: 2rpx solid #2477f4;
		background-color: #2477f4;
	}

	.bc2 {
		z-index: 10;
		top:138rpx;
		width: 650rpx;
		margin: 0 20rpx 0;
		position: absolute;
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: white;
	}
	
	/* 优惠券部分样式开始 */
	.listItem{
		width: 590rpx;
		height: 180rpx;
		color: white;
		padding: 30rpx;
		background-image: url('/static/coupon.png');
		background-size: 100% 100%;
		margin-bottom: 20rpx;
	}
	.up{
		height: 135rpx;
		position: relative;
		margin-bottom: 15rpx;
		border-bottom: 2rpx dotted white;
	}
	.scope{
		font-size: 24rpx;
	}
	.condition{
		padding-top: 10rpx;
		font-size: 40rpx;
		font-weight: bold;
	}
	
	.up-right{
		right: 0;
		top: 30rpx;
		position: absolute;
	}
	.up-right>text:nth-child(2){
		font-weight: bold;
		font-size: 80rpx;
	}
	.down{
		position: relative;
		font-size: 24rpx;
	}
	.down-right{
		top: 0rpx;
		right: 30rpx;
		position: absolute;
		
	}
	.use{
		position: relative;
	}
	.icon-right{
		top: 2rpx;
		position: absolute;
	}
	
</style>

